import React, { PureComponent, Fragment } from 'react'
import {DatePicker, message} from 'antd'
import { connect } from 'dva'
import moment from 'moment'
import PateoStandardTable from '@/common/PateoTable/PateoStandardTable';
import PateoAuthButtons from '@/common/PateoAuthButtons/PateoAuthButtons';
import MapModel from '../../modals/MapModel';

const dateFormat = 'YYYY-MM-DD';

@connect(({ common, loading }) => ({
  common,
  loading: loading.models.common,
}))
export default class WheelPathTab extends PureComponent {

  state = {
    detailVisible: false,
    detailModelData: {},
  };

  componentDidMount() {
    this.getTableData();
  }

  getTableData = (value) => {
    const { dispatch, vin } = this.props;
    dispatch({
      type: 'common/listDataGet',
      payload: {
        url: '/vehicle/findwheelpath',
        vin,
        searchDate: value ? value.format(dateFormat) : moment().format(dateFormat),
      },
    })
  };

  /**
   * 查询地图的描点数据，调用大数据接口
   * @param record
   */
  goMap = record => {
    const {dispatch} = this.props;
    dispatch({
      type: 'extendForm/fetch',
      payload: { url: '/vehicleDataMonitoring/travel/point', vin: record.vin,startTime:record.startTime,endTime:record.endTime,projectid:'wlapp' },
      callback: (response) => {
        if(response.statusCode === '200'){
          this.map.handleSetInterval(response.data);
          this.setState({ detailVisible: true, detailModelData: response.data });
        } else{
          message.error(response.statusMsg);
        }
      }
    });

    /*
    //静态数据，参照rc-bmap实例
    this.map.handleSetInterval(points);
    this.setState({ detailVisible: true, detailModelData: points });*/

  };

  render() {
    const { common: { listData }, loading, vin } = this.props;
    const columns = [
      {
        width: '10%',
        title: '起止时间',
        dataIndex: 'time',
        render: (text, record) => {
          return `${moment(record.startTime).format('HH:mm')}-${moment(record.endTime).format('HH:mm')}`;
        },
      }, {
        width: '10%',
        title: '耗时',
        dataIndex: 'driverTime',
        render: (text) => `${text} min`
      }, {
        width: '10%',
        title: '里程（KM）',
        dataIndex: 'eachMileage',
      }, {
        width: '10%',
        title: '油耗（L）',
        dataIndex: 'eachFuel',
        render: (text) => text ? text / 1000000 : ''
      }, {
        width: '25%',
        title: '起始地点',
        dataIndex: 'startPointName',
      }, {
        width: '25%',
        title: '停止地点',
        dataIndex: 'endPointName',
      },{
        width: '10%',
        title: '操作',
        dataIndex: 'opertation',
        render: (text, record) => {
          const btns = [];
          if (record.eachFuel > 0) {
            btns.push({
              title: '进入地图',
              key: 'goMap',
              //onConfirm: () => this.setState({ detailVisible: true, detailModelData: record }),
              onConfirm: () => {this.goMap(record)},
            })
          }
          return <PateoAuthButtons authStr="vehicleSGMW-wheelPath" btns={btns}/>;
        },
      }
    ];

    const tableProps = {
      columns,
      dataSource: listData,
      size: 'small',
      loading,
      rowKey: record => record.id,
      pagination: false,
    };

    return (
      <Fragment>
        <span>选择日期：</span>
        <DatePicker
          defaultValue={moment()}
          format={dateFormat}
          onChange={this.getTableData}
          allowClear={false}
          style={{ width: 200, marginBottom: 20 }}
        />
        <PateoStandardTable
          tableProps={tableProps}
          fetchUrl='common/listDataGet'
          parameterUrl='/vehicle/findwheelpath'
          formValues={{ vin }}
        />
        <MapModel
          onRef = { ref => this.map = ref }
          changeVisible={() => this.setState({ detailVisible: false, detailModelData: {} })}
          visible={this.state.detailVisible}
          detailModelData={this.state.detailModelData}
          dispatch={this.props.dispatch}
        />
      </Fragment>
    )
  }
}
